import React, { Component } from 'react'
import { Block } from 'fs-flex';
import {List,WingBlank,InputItem,Toast,Button} from 'antd-mobile';
import { createForm } from 'rc-form';
import Header from '../../components/Header/index';
import VerificationCode from '../../components/VerificationCode/index'
// import styles from './index.less';
import ViewMyQueueService from '../../services/viewMyQueueService'
import Canstant from '../../utils/constant'

// 查看排号
class ViewQueue extends Component {
  state = {
    verificationCodeVal:null,//验证码
    phoneNumber: null // 手机号
  }

  // 验证码输入框change
  verificationCodeChange=(verificationCode,phoneNumber)=>{
    this.setState({verificationCodeVal:verificationCode,phoneNumber:phoneNumber})
  }

  async appointment(){
    const {verificationCodeVal,phoneNumber} = this.state


    if(!phoneNumber){
      Toast.fail('请填写电话号码',1)
      return
    }else{
      var isPhone = /^1[34578]\d{9}$/;//手机号码
      if(!isPhone.test(phoneNumber.replace(/\s+/g, ""))){
        Toast.fail('请填写正确电话号码',1)
        return
      }
    }
    if(!verificationCodeVal){
      Toast.fail('请输入短信验证码',1)
      return
    }

    const params = { mobile:phoneNumber.replace(/\s+/g, ""),
      checkCode:verificationCodeVal,//验证码
    }
    const {code,data,msg} = await ViewMyQueueService.myQueueInfo(params)

    if(code===Canstant.responseOK){
      // Toast.success('排号成功',1)
      setTimeout(() => {
        this.props.history.push({pathname:'/my',state:{data:data}})
      }, 1000);
      //TODO 路由跳转
    }else{
      Toast.fail(msg?msg:'查询失败，请重新尝试！')
    }
  }

  render(){
    const {form:{getFieldProps,getFieldError},history}=this.props
    return (
      <Block vf>
        <Block>
          <Header history={history} title='排号'/>
          <Block vf>
            <WingBlank>
              <Block mt={10}>
                <VerificationCode
                  props={this.props}
                  verificationCodeChange={this.verificationCodeChange}
                  btnText='发送验证码'/>
              </Block>

              <Block wf mt={15} style={{paddingBottom:'15px'}}>
                <Block f='3'></Block>
                <Block f='4'><Button a='c' f='c' size='small' type="primary" onClick={this.appointment.bind(this)}>查看预约</Button></Block>
                <Block f='3'></Block>
              </Block>
            </WingBlank>
          </Block>
        </Block>
      </Block>
    )
  }
}

export default createForm()(ViewQueue);
